<template>
  <div class="index">
    <header class="index_header">
      <van-image class="index_header_logo" :src="logoSrc" />
      <h3 class="index_header_title">大熊日料自助点餐</h3>
    </header>
    <main class="index_main">
        <router-view/>
    </main>
    <footer class="index_footer">
      <span>@2025 大熊日料自助点餐</span>
      <span>技术支持：大熊日料科技支持</span>
    </footer>
  </div>
</template>

<script setup>
import logoSrc from '@/assets/logo.png';

</script>

<style lang="less" scoped>
.index{
  display: flex;
  flex-direction: column;
  background-color: #ffff;
  height: 100vh;
  background-image: url('@/assets/index-background-image.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  &_header{
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &_logo{
      margin-top: 32px;
      border-radius: 50%;
      width: 64px;
      height: 64px;
    }
    &_title{
      margin-top: 8px;
      color: #754C29;
    }
  }
  &_main{
    height: calc(100vh - 120px - 60px);
  }
  &_footer{
    height: 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    color: #333;
    font-size: 14px;
  }

}

</style>
